<template>
  <div class="indexThree">
    <div class="content">
      <!-- <img
        class="title-img"
        src="https://img10.360buyimg.com/babel/jfs/t1/154825/27/19542/32051/603772f1E8d846eb2/2d75bb25cc4087a5.jpg.webp"
      /> -->
      <div class="good-items">
        <h2>
      <i class="iconfont icon-huo mini"></i>
      <i class="iconfont icon-huo middle"></i>
      <i class="iconfont icon-huo "></i> 每月精品秒杀 <i class="iconfont icon-huo "></i>
      <i class="iconfont icon-huo middle"></i>
      <i class="iconfont icon-huo mini"></i>
      <!-- <a
            class="more"
           href="http://www.higuang365.com/wap/#/doubleEleven"
            >更多></a> -->
            <a
            class="more"
           href="http://www.higuang365.com/index.php/wap/#/giftbag"
            >更多></a>
            <!-- http://192.168.0.78:8081/#/summer -->
    </h2>
        <!-- <div class="good-title"> -->
          <!-- <span
            >&nbsp;每月精选秒杀
            
            
        </span> -->
        <!-- <i class="iconfont icon-iconfontzhizuobiaozhun02100"></i> -->
          <!-- <a
            class="more"
           href="http://www.higuang365.com/wap/#/giftbag"
            >更多></a> -->
        <!-- </div> -->
        <van-skeleton title :row="5" v-if="items.length == 0" />
        <div id="indexThree-scroll" class="indexThree-scroll" v-else>
        <div id="indexThree-begin" class="good-item" >
          <div  class="item" v-for="(value, index) in items" :key="index">
            <div
              class="good-card"
             
            >
              <img
                class="product-img lazy-img"
                :src="'http://higuang365.com/' + value.F_pic_url"
                @load="loadimg($event)"
                @click="
                toshop(value.F_ProductId, $store.state.userInfo.F_Question)
              "
              />
              <!-- data-lazy="loading" -->
              <div class="good-desc">
                <!-- <div class="county">
                  <img
                    class="county-icon"
                    v-if="value.F_yuliu2"
                    :src="'http://higuang365.com/' + value.F_yuliu2"
                    alt=""
                  />

                  <div class="county-title">{{ value.F_BrandCountrie }}</div>
                </div> -->

                <div class="title">{{ value.F_Name }}</div>
                <span class="price">¥ {{ value.F_SpecialPrice }}</span>
                <br />
                <div class="price-share"   @click.stop="
                      showShare(value, $store.state.userInfo.F_Question)
                    ">
                  <span class="estimate"> {{ value.F_Amount }}</span>
                  <span
                    class="share"
                  
                  >
                    <!-- @click.stop="showShare()" -->
                    <i class="iconfont icon-icon-test1"
                  /></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="indexThree-end" class="good-item"></div>
        </div>
      </div>
    </div>
    <van-overlay :show="showherf" z-index=10001>
        <div class="wrapper" @click.stop>
          <van-loading type="spinner" color="#fff" size="3rem" vertical>前往商城</van-loading>
        </div>
      </van-overlay>
  </div>
</template>
<script>
import { reactive, toRefs } from "@vue/reactivity";
import { GetTagGoodsList } from "@/api/home";
import {ScrollLeft} from '@/lib/expand'
import {  nextTick } from "vue";
export default {
  setup() {
    const data = reactive({
      items: [],
      showherf:false,
    });
    const onLoad = async () => {
      const res = await GetTagGoodsList({  pageNum: 1,
        pageSize: 10,
        tag_id: 37,
        strlv: "",});
        console.log('three',res      );
      data.items = res[1];
      nextTick(() => {
        const listScroll = new ScrollLeft(
          "indexThree-scroll",
          "indexThree-begin",
          "indexThree-end"
        );
        listScroll.start(15);
      });
    };
    const showShare = (value, F_Question) => {
      console.log('showshare');
      // e.stopPropagation()
      let purl = "http://higuang365.com/" + value.F_pic_url; //可以是本地图片
      var surl =
         "http://www.higuang365.com/wap/#/product?id=" +
          value.F_ProductId + "&parents_id=" + F_Question ;//分享的链接
      let msg = {
        title: "嗨逛全球", //标题
        content: value.F_Name, //内容
        thumbs: [purl], //缩略图
        href: surl,

        extra: {
          scene: "WXSceneChooseByUser",
        },
      };
      if (navigator.userAgent.indexOf("haiguang_mobile") > -1) {
        window.location.href = `higuang|shareGood|${msg.title}|${msg.content}|${purl}|${surl}`;
      } else {
        window.location.href =
           "http://www.higuang365.com/wap/#/product?id=" +
          value.F_ProductId + "&parents_id=" + F_Question ;
      }
    };
    const loadimg = (event) => {
      event.target.dataset.lazy = "loaded";
    };
    const toshop=(F_ProductId,F_Question)=>{
// e.stopPropagation()
// console.log('toshop')
      data.showherf=true;
      setTimeout(()=>{
        data.showherf=false;
        window.location.href="http://www.higuang365.com/wap/#/product?id=" +F_ProductId+"&parents_id=" + F_Question ;
      },2000)
      
    }
    onLoad();
    return { ...toRefs(data), loadimg, showShare,toshop };
  },
};
</script>
<style lang="scss" scoped>
.indexThree {
  margin: 1rem 0;
  background: #fff;
  padding: 0 0.5rem 1rem;

   .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2rem;
  }
}

.content {
  display: flex;
  align-items: center;
  
  .title-img {
    width: 12rem;
    border-radius: 1rem 0 0 1rem;
    margin-right: 2px;
  }
}
.indexThree-scroll {
  overflow: auto;
  white-space: nowrap;
}
.good-items {
  width: 100%;
  h2 {
    font-size: 2rem;
    padding: 0.5rem;
    margin: 1rem;
    border-bottom: 5px solid #f7f7f7;
    position: relative;
    i {
      color: red;
      font-size: 2rem;
    }  .icon-huo {
      font-size: 2rem;
    }
    .mini {
      font-size: 1.4rem;
    }
    .middle {
      font-size: 1.7rem;
    }
    .more {
      font-size: 1rem;
      position: absolute;
      top: 1rem;
      right: 0;
      font-weight: 500;
      color: #f15e5e;
    }
  }
}
.good-title {
  color: #000;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 1rem 1rem;
  letter-spacing: 3px;
  position: relative;
 .more{
    font-size: 1rem;
    position: absolute;
    right: 0;
    font-weight: 500;
    color: #f15e5e;
    letter-spacing: 0;
}
  i {
    color: red;
    font-size: 1.6rem;
    font-weight: 500;
  }
}
.good-item {
  // display: flex;
  // overflow: auto;
  display: inline-flex;
  overflow: auto;
  .item {
    margin: 0.5rem;
    width: 10rem;
    min-width: 10rem;
    font-size: 1rem;
    position: relative;
    &::after {
      content: "热卖";
      display: block;
      position: absolute;
      left: 0;
      z-index: 100;
      top: 8.3rem;
      background: #ff5c00;
      border-radius: 0 1rem 0 3px;
      color: #fff;
      letter-spacing: 1px;
      padding: 1px 0.6rem;
    }
  }
  .good-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .product-img {
    display: block;
    width: 100%;
    height: 10rem;
    margin: 0 auto;
  }
  .good-desc {
    text-align: left;
    font-size: 1.2rem;
    padding-top: 1rem;
    position: relative;
    text-align: center;
    .county {
      display: flex;
      .county-icon {
        width: 2rem;
        height: 100%;
      }
      .county-title {
        color: #999;
        margin-left: 0.5rem;
      }
    }

    .title {
      height: 1.6rem;
    line-height: 1.6rem;
    color: #222333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    .price {
      font-size: 1.4rem;
      margin-top: 1rem;
      color: #fd5633;
      font-weight: bold;
    }
    .price-share {
      justify-content: space-around;
      display: flex;
    }
    .share {
      color: #3c8a58;
      z-index: 20000;
    }
    .estimate {
      color: #a5a5a5;
      font-size: 1rem;
    }
  }
   

}
</style>